<template>
	<view class="teach-container">
		<view class="top-button">
			<uni-search-bar class="uni-mt-10" radius="100" placeholder="搜索试卷" clearButton="none" cancelButton="none" @confirm="search" />
			<!-- <button size="mini" @click="addCate()">创建类目</button> -->
		</view>
		<view class="detail">
			<view class="status-view">
				<text class="button blue"></text><text>待批改</text>
				<text class="button green"></text><text>批改完成</text>
			</view>
			<uni-table>
				<uni-tr>
					<uni-th width="252rpx" align="center">考试名称</uni-th>
					<uni-th width="182rpx" align="center">姓名</uni-th>
					<uni-th width="182rpx" align="center">部门</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center"><text>{{item.examinationName }}</text></uni-td>
					<uni-td align="center">{{ item.studentName}}</uni-td>
					<uni-td align="center"><text  >点击查看</text>	</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>
<script>
	import { getRecordPage} from '@/api/exam/exam.js'
	export default {
		data() {
			return {
				tableData: [],
				pageForm:{
					pageNo:1,
					pageSize:10,
				},
			}
		},
		created() {
			this.getList();
		},
		methods: {
			addCourse(){
				this.$tab.navigateTo('/pages/work/teach/addCourse')
			},
			getList(){
				getRecordPage(this.pageForm).then(res=>{
					this.tableData=res.data.list
				})
			},
			clickDetail(e){
				this.$tab.navigateTo('/pages/work/teach/addCourse?id='+e.id)
			},
			clickRecord(e){
				this.$tab.navigateTo('/pages/work/teach/courseRecord?id='+e.id)
			},
			search(res){
				this.pageForm.examinationName=res.value
				this.getList()
			}
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		min-height: 100%;
		height: auto;
		width: calc(100vw - 60rpx);
		margin: 0 auto;
	}
	
	view {
		font-size: 14px;
		line-height: inherit;
	}
	
	/* #endif */
	.teach-container{
		background-color: #fff;
		margin-top: 40rpx;
		padding:0 40rpx;
		.top-button{
			button{
				border: none;
				padding: 0 20rpx;
				line-height: 50rpx;
				background: #508CFF;
				color: #fff;
				margin-right: 20rpx;
			}
		}
		.detail {
			width: 100%;
			background-color: #fff;
			border-radius: 20rpx;
			padding-top: 20rpx;
			.status-view{
				display: flex;
				margin-bottom: 10px;
				.button{
					display: inline-block;
					width: 20px;
					height: 20px;
					border: none;
					border-radius: none;
					margin:0 5px 0 10px ;
				}
				
			}
			.uni-table-scroll{
				border-radius: 10rpx 10rpx 30rpx 30rpx;
			}
			
			.uni-table {
				color: #fff;
				.uni-table-tr {
					background-color: rgba(80, 140, 255, 0.4600);
					border-radius: 10rpx;
		
					.uni-table-td {
						color: #fff !important;
						padding: 10rpx !important;
						border-bottom: 14rpx #fff solid !important;
						font-size: 14px;
						font-family: Inter-Bold, Inter;
						font-weight: bold;
						line-height: 36px;
					}
		
					.uni-table-th {
						color: #fff !important;
						border-bottom: 14rpx #fff solid !important;
					}
				}
		
				.uni-table-tr:nth-child(1) {
					background: #508CFF;
				}
			}
			.blue{
				background-color: #A7C5FF;
			}
			.green{
				background-color: #50B987;
			}
		}
	}
</style>